import React from 'react';
import ReactDom from 'react-dom';
import { api } from 'js/api/api';
import './decompose.scss';

class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            selectBagIndexId: null
        }
    }
    componentDidMount() {

    }
    decompose = () => {
        api('decompose', { index: this.state.selectBagIndexId }, () => {
            if (this.props.complete) {
                this.props.complete();
            }
        });
    }
    bagClick = (index) => {
        let item = this.props.bag.items[index];
        if (item) {
            if (window.totalConfigById[item.templateId].templateType === 51) {
                this.setState({ selectBagIndexId: index })
                return;
            }
        }
        this.setState({ selectBagIndexId: null })
    }
    getEquipmentText = () => {
        let bag = this.props.bag;
        let selectBagIndexId = this.state.selectBagIndexId;
        if (this.state.selectBagIndexId) {
            let propName = window.propName;
            let item = bag.items[selectBagIndexId];
            let strengthensConfig = window.totalConfig.strengthen;
            if (item) {
                let itemConfig = totalConfigById[item.templateId];
                let strengthenConfig = strengthensConfig[430001].config[item.strLvl][itemConfig.type];
                return <div>
                    <div className="flex">
                        <div className="name">装备</div>
                        <div className="value">{item.name + 'x' + item.strLvl}</div>
                    </div>
                    <div className="flex">
                        <div className="name">需要的金币</div>
                        <div className="value">{strengthenConfig.needGold}</div>
                    </div>
                    <div className="bag-button" onClick={this.decompose}>分解</div>
                </div>
            } else {
                return '选择要强化的装备';
            }
        }
    }
    render() {
        let { selectBagIndexId } = this.state;
        let propName = window.propName;
        let player = window.player;
        let { bag } = this.props;
        return <div className="decompose flex-col">
            <div className="flex-col-center flex-g-1">
                {this.getEquipmentText()}
            </div>
            <div className="bag">
                <div className="flex wrap  bag-content">{bag.items && bag.items.map((item, i) => {
                    if (item) {
                        return <div className={"item flex-vcenter" + (selectBagIndexId === i ? ' active' : '')}
                            key={i} onClick={() => { this.bagClick(i) }}>
                            {propName[item.templateId]}
                            <div className="bag-item-number">{item.stack}</div>
                        </div>
                    } else {
                        return <div className="item" key={i}></div>
                    }
                })}</div>
                <div className="line"></div>
                <div className="bag-bottom">
                    <div className="flex jc-end lineItem1">
                        <div className="gold">金币&nbsp;&nbsp;{player.basicInfo.gold}</div>
                        <div className="diamond">钻石&nbsp;&nbsp;</div>
                    </div>
                    <div className="flex-vcenter jc-end lineItem2">
                        <div className="bag-button" onClick={this.discard}>丢弃</div>
                        <div className="bag-button">扩展格子+1</div>
                        <div className="bag-button">整理</div>
                    </div>
                </div>
            </div>
        </div>
    }
}


export default Main;